<template>
  <view class="w-[100%] h-[100%] flex flex-col items-center justify-center">
    <view
      class="w-[100%] h-[300px] bg-[#375ea3] flex flex-col items-center justify-center"
      style="position: relative"
    >
      <view class="flex flex-row items-start justify-start">
        <image
          src="../../static/a29.png"
          mode="scaleToFill"
          class="w-[40px] h-[40px]"
        />
        <view class="flex flex-col items-center justify-center">
          <text class="text-[30px] text-[#fff]">欢迎</text>
          <text class="text-[15px] text-[#fff]">登录/加入到我们一起献爱心</text>
        </view>
      </view>
      <view class="absolute bottom-[90rpx] right-[0]">
        <image
          src="../../static/monster.png"
          mode="scaleToFill"
          class="w-[90px] h-[90px]"
        />
      </view>
    </view>
    <view
      class="w-[85%] h-[auto] bg-[#fff] shadow-[0_4px_10px_rgba(0,0,0,0.2)] rounded-[30rpx] flex flex-col items-center justify-start mt-[-100px] z-[3] px-2 py-4"
    >
      <view
        class="w-[98%] h-[60rpx] shadow-[0_4px_10px_rgba(0,0,0,0.2)] relative flex flex-row items-center justify-between bg-[#fff] rounded-[30rpx]"
      >
        <view
          class="absolute top-0 h-full w-[50%] bg-[#4f87f4] transition-all duration-300 rounded-[30rpx] flex items-center justify-center text-[#fff]"
          :style="isLogin ? 'left: 0;' : 'left: 50%;'"
        >
          {{ isLogin ? '志愿者' : '家长' }}
        </view>
        <view
          class="w-[50%] h-[100%] flex justify-center items-center rounded-[30rpx]"
          @click="switchLogin(1)"
          >志愿者</view
        >
        <view
          class="w-[50%] h-[100%] flex justify-center items-center rounded-[30rpx]"
          @click="switchLogin(2)"
          >家长</view
        >
      </view>
      <view class="mt-4 w-[98%]">
        <view class="mb-4">
          <text class="mb-2">手机号</text>
          <wd-input
            type="text"
            v-model="loginForm.phone"
            prefix-icon="phone"
            placeholder="请输入手机号"
          />
        </view>
        <view class="mb-4">
          <text class="mb-2">邮箱</text>
          <wd-input
            type="text"
            v-model="loginForm.email"
            prefix-icon="evaluation"
            placeholder="请输入邮箱"
          />
        </view>
        <view class="mb-4">
          <text class="mb-2">密码</text>
          <wd-input
            type="text"
            v-model="loginForm.password"
            prefix-icon="lock-on"
            placeholder="请输入密码"
          />
        </view>
        <view class="flex flex-row items-center justify-between w-[98%] mt-10">
          <view
            class="w-[48%] h-[80rpx] rounded-[40rpx] bg-[#4f87f4] text-[#fff] flex items-center justify-center"
            @click="login"
          >
            登录
          </view>
          <view
            class="btn w-[48%] h-[80rpx] rounded-[40rpx] flex items-center justify-center"
            @click="register"
          >
            注册
          </view>
        </view>
      </view>
    </view>
    <view class="text-[14px] text-[#a1a8b0] mt-4">
      小程序由四元玉鉴工作室提供技术支持
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import * as loginApi from '@/api/login.api'
import { reLunchTo } from '@/utils/unifunc'

const isLogin = ref(true)

const loginForm = reactive({
  phone: '',
  email: '',
  password: ''
})

const switchLogin = (id: number) => {
  isLogin.value = id === 1
}

const login = async () => {
  if (!loginForm.phone) {
    uni.showToast({
      title: '请输入手机号'
    })
    return
  }
  if (!loginForm.email) {
    uni.showToast({
      title: '请输入邮箱'
    })
    return
  }
  if (!loginForm.password) {
    uni.showToast({
      title: '请输入密码'
    })
    return
  }
  const params = {
    phone: loginForm.phone,
    email: loginForm.email,
    password: loginForm.password,
    role: isLogin.value ? 1 : 2
  }
  const res = await loginApi.login<typeof params, UserInfo>(params)
  if (res.code === 200) {
    uni.setStorageSync('user', res.data)
    reLunchTo('/pages/index/homePage')
  }
}

const register = async () => {
  if (!loginForm.phone) {
    uni.showToast({
      title: '请输入手机号'
    })
    return
  }
  if (!loginForm.email) {
    uni.showToast({
      title: '请输入邮箱'
    })
    return
  }
  if (!loginForm.password) {
    uni.showToast({
      title: '请输入密码'
    })
    return
  }
  const params = {
    phone: loginForm.phone,
    email: loginForm.email,
    password: loginForm.password,
    role: isLogin.value ? 1 : 2
  }
  const res = await loginApi.signup<typeof params>(params)
  if (res.code === 200) {
    uni.showToast({
      title: '注册成功'
    })
  }
}
</script>

<style lang="scss" scoped>
.btn {
  border: 2rpx solid #4f87f4;
}

:deep(.wd-input) {
  width: 100% !important;
  border-radius: 30rpx;
}
</style>
